{% extends 'base/base.html' %}
{% load static %}
{% block css %}
    <link href="{% static "css/dataTables.bootstrap.min.css" %}" rel="stylesheet">
    <style>
        .btn-default:hover{
            background-color: dodgerblue !important;
        }
        tr td,th{
            text-align: center;
        }

    </style>
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>脑出血患者调查问卷待提交名单
                    <small>安徽省</small>
                    </h2>

                    <div class="clearfix"></div>
                </div>
                <div class="x_content">

                    <div class="col-md-12 col-sm-12 col-xs-12">

                        <div class="table-responsive">
                            <table id="datatable-buttons" class="table table-striped table-bordered table-hover table-condensed jambo_table bulk_action">
                                <thead>
                                    <tr>
                                        <th>登录账号</th>
                                        <th>调查人姓名</th>
                                        <th>调查日期</th>
                                    </tr>
                                </thead>
                                <tbody id="tb">
                                    {% for row in user_obj %}
                                    <tr class="even pointer">
                                        <td>{{ row.登录账号 }}</td>
                                        <td>{{ row.填表人签名 }}</td>
                                        <td>{{ row.填表人填写日期 }}</td>
{#                                      <td>{{ row.last_login|date:"Y-m-d H:i:s" }}</td>#}
                                    </tr>

                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static "js/jquery.dataTables.min.js" %}"></script>
    <!-- datatable button  -->
    <script src="{% static "js/dataTables.bootstrap.min.js" %}"></script>

    <script>


            $(function () {

                datatable_func();
            });

            function datatable_func() {
            $('#datatable-buttons').dataTable({
                bFilter: true,    //去掉搜索框方法三：这种方法可以
                bLengthChange: true,   //去掉每页显示多少条数据方法
                aLengthMenu:[20,50,100,200], // 定义每页显示数据数量,
                paging: true,
                bInfo: true,
                language: {
                        "sProcessing": "处理中...",
                        "sLengthMenu": "显示 _MENU_ 项结果",
                        "sZeroRecords": "没有匹配结果",
                        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                        "sInfoPostFix": "",
                        "sSearch": "搜索:",
                        "sUrl": "",
                        "sEmptyTable": "表中数据为空",
                        "sLoadingRecords": "载入中...",
                        "sInfoThousands": ",",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "上页",
                            "sNext": "下页",
                            "sLast": "末页"
                        },
                        "oAria": {
                            "sSortAscending": ": 以升序排列此列",
                            "sSortDescending": ": 以降序排列此列"
                        }
                }
            });
        }

    </script>

{% endblock %}

